<template>
  <div class="barrageSend">
    <p>发条友善的弹幕吧</p>
    <div><span class="title fix">昵称:</span><input type="text" v-model="sendData.name"></div>
    <div><span class="title fix">内容:</span><textarea v-model="sendData.content"></textarea></div>
    <div>
      <div>
        <span class="title">大小:</span>
        <span class="sizeBox">
          <span v-for="s in size"
                :class="['size', s, { active: s === sendData.size }]"
                @click="sizeChange(s)">{{ s[0].toUpperCase() }}</span>
        </span>
      </div>
      <div>
        <span class="title">颜色:</span>
        <el-color-picker v-model="sendData.color" show-alpha/>
      </div>
    </div>
    <button @click="pushData">发送</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import luFeiImg from "@/assets/images/haiZei/luFei.png";
import luoBinImg from "@/assets/images/haiZei/luoBin.png";
import naMeiImg from "@/assets/images/haiZei/naMei.png";
import qiaoBaImg from "@/assets/images/haiZei/qiaoBa.png";
// 此方法用来调用父组件方法
const emit = defineEmits([ "addBarrage" ]);
// 发送对象
const sendData = ref({
  name: "",
  time:0,
  content: "",
  avatarImg:"",
  size: "normal",
  color: "rgba(19, 206, 102, 1)"
});

// 字体大小
const size = ["small", "normal", "big"];

// 头像集合
const avatarImgList = [luFeiImg,luoBinImg,naMeiImg,qiaoBaImg];

// 字体大小改变
function sizeChange(v) {
  sendData.value.size = v;
}

// 将弹幕信息出去发送
function pushData(){
  // 设置时间
  sendData.value.time = new Date().getTime();
  // 设置头像
  sendData.value.avatarImg = getAvatarImg();
  // 转一下再传出去，避免影响到前面的数据
  let stringify = JSON.stringify(sendData.value);
  emit('addBarrage',JSON.parse(stringify));
}

function getAvatarImg(){
  // 头像下标
  let roundIndex = Math.round(Math.random()*(avatarImgList.length-1));
  return avatarImgList[roundIndex];
}
</script>

<style scoped>

</style>
